<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Vue3 + Element Plus（Composition API）示例</title>
    <!-- Vue 3 CDN -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- Element Plus CDN -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus"></script>
</head>
<body>
<div id="app">
    <el-container style="padding: 40px">
        <el-button type="primary" @click="openDialog">
            用 Composition API 打开对话框
        </el-button>

        <el-dialog
                title="欢迎"
                :model-value="dialogVisible"
                @close="closeDialog"
                width="30%">
            <span>{{ message }}</span>
            <template #footer>
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" @click="closeDialog">确 定</el-button>
            </template>
        </el-dialog>
    </el-container>
</div>

<script>
    const { createApp, ref } = Vue;  // Composition API

    const App = {
        // 使用 setup 定义逻辑与状态
        setup() {
            // 1. 定义响应式变量
            const message = ref('Hello (Composition API) and Element Plus!');
            const dialogVisible = ref(false);

            // 2. 定义方法
            const openDialog = () => {
                dialogVisible.value = true;
            }
            const closeDialog = () =>{
                dialogVisible.value = false;
            }

            // 3. 暴露给 template 的变量和方法
            return {
                message,
                dialogVisible,
                openDialog,
                closeDialog
            }
        },

    };

    createApp(App).use(ElementPlus).mount('#app');
</script>
</body>
</html>